import React,{Component} from 'react'
import './index.scss'
import logo from '../../asstes/images/logo.jpg'
import {Link,withRouter} from 'react-router-dom'
import { Menu } from 'antd';

 
import menuList from '../../config/menuConfig'
const { SubMenu } = Menu;

 class Navleft extends Component{
    state = {
        collapsed: false,
      };
    
      /* 根据menu的数据数组生成对应的标签函数
      map加递归调用生成动态菜单
      */
        
      //   getMenuNodes_map=(menuList)=>{
      //   return menuList.map(item=>{
      //     if(!item.children){
      //       return (
      //       <Menu.Item  key={item.key}  >
      //         <Link to={item.key} >
      //         {/* <item.icon /> */}
      //         <span >{item.title}</span>
      //         </Link>
      //         </Menu.Item>)
              
      //     }else{
      //       return(
              // <SubMenu key={item.key} title={
              // <span>
              //   <item.icon />
              //   <span>{item.title}</span>    
              //    </span>
              //   }>
              // {this.getMenuNodes(item.children)}
              // </SubMenu>
      //       )
      //     }
          
      //   })
      // }
      /**
       * 第二个方法
       * reduce+递归
       */
       getMenuNodes=(menuList)=>{
         // 向pro中添加《menu。item》 <submenu>
          /**
           *  reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

              reduce() 可以作为一个高阶函数，用于函数的 compose。

              注意: reduce() 对于空数组是不会执行回调函数的。
           */
          const path=this.props.location.pathname;

         return menuList.reduce((pre,item)=>{
 
          if(!item.children){
            pre.push((
              <Menu.Item  key={item.key}  >
               <Link to={item.key} >
              {/* <item.icon /> */}
             <span >{item.title}</span>
               </Link>
              </Menu.Item>
            ))
          }else{
            //查找一个当前请求路径的子item
            const cItem =item.children.find(cItem=>cItem.key===path)
            if(cItem){
            //存在说明子列表需要被打开，刷新之后还能选中已经点击过的标签
              this.openKey=item.key;
            }
            
            pre.push((
            <SubMenu key={item.key} title={
              <span>
                <item.icon />
                <span>{item.title}</span>    
                 </span>
                }>
              {this.getMenuNodes(item.children)}
              </SubMenu>
            ))
          }
          return pre;
         },[])
       }

       /**
        * 在第一次render准备执行的时候调用为render准备同步的数据
        */
      componentWillMount(){
        this.munenodes= this.getMenuNodes(menuList)
      }
      
    render(){

      // debugger 可以用来调试，测试是否有值
      const path=this.props.location.pathname;
      //可以得到打开子菜单的key值
      const openKey=this.openKey;
      // console.log('redner',path)
        return(
            <div className="nav">
            <Link to='/' >
            <img src={logo} alt="404" />
            <h1>react后台</h1>
            </Link>

           
        <Menu
          defaultSelectedKeys={[path]}
          defaultOpenKeys={[openKey]}
          mode="inline"
          theme="dark"
          className="menu"
        >
          {/* <Menu.Item key="/home" icon={<BankOutlined />}>
            <Link to='/home' >
            <span >首页</span>
            </Link>
         </Menu.Item>
         
          <SubMenu key="sub1" icon={<AppstoreOutlined />} title="商品">
            <Menu.Item key="/category" icon={<AppstoreAddOutlined />}>
              <Link to='/category'>
                <span>
                品类管理
                </span>
              </Link>
              </Menu.Item>
            <Menu.Item key="/produc"icon={<GoldOutlined />}>
              <Link to='/product'>
              <span>
              商品管理
              </span>
              </Link>
              </Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="图表">
            <Menu.Item key="/echarts/bar" icon={<AppstoreOutlined />}>
              <Link to='/echarts/bar'>
                <span>
                柱形图
                </span>
              </Link>
              </Menu.Item>
            <Menu.Item key="/echarts/line"icon={<AppstoreOutlined />}>
              <Link to='/echarts/line'>
              <span>
              折线图
              </span>
              </Link>
              </Menu.Item>
              <Menu.Item key="/echarts/pie"icon={<AppstoreOutlined />}>
              <Link to='/echarts/pie'>
              <span>
              饼状图
              </span>
              </Link>
              </Menu.Item>
          </SubMenu>
          <Menu.Item key="/user" icon={<UserOutlined />}>
            <Link to='/user' >
            <span >用户</span>
            </Link>
         </Menu.Item>

         <Menu.Item key="/role" icon={<BankOutlined />}>
            <Link to='/role' >
            <span >角色管理</span>
            </Link>
         </Menu.Item> */}

      {/* 优化使用 */}
         {
          //  this.getMenuNodes(menuList)
          // 操作 menu的所有子节点
         this.munenodes
         }
        </Menu>
 
          </div>
        )
    }
  }

  // withRouter高阶函数,包装非路由组件，返回新的组件，传递三个属性：history，location，match
  export default withRouter(Navleft)